<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors: dudu
 * @LastEditTime: 2020-07-03 14:59:39
 -->
<template>
  <div class="home">
    <div class="tableArea">
      <FilterColumns :tableData.sync="tableData"
                     :tableHeaders.sync="tableHeaders"
                     @update="handleUpdate" />
      <div>
        <el-table :data="tableData"
                  stripe
                  border>
          <el-table-column v-for="(item, index) in tableHeaders"
                           :key="index"
                           :prop="item.name"
                           :label="item.label">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 测试发布组件 -->
    <InputTest text="dudu" @valueChange="handleValueChange"></InputTest>
  </div>
</template>

<script>
import _ from "lodash";
import FilterColumns from "../components/FilterColumns";

export default {
  name: "home",
  components: {
    FilterColumns
  },
  data () {
    return {
      tableHeaders: [
        { name: "id", label: "ID", disabled: true },
        { name: "name", label: "姓名", disabled: true },
        { name: "grade", label: "年级" },
        { name: "class", label: "班级" },
        { name: "group", label: "小组" }
      ],
      tableData: [
        {
          grade: "一年级",
          class: "二班",
          group: "一组",
          name: "张三",
          id: 1
        },
        {
          grade: "一年级",
          class: "三班",
          group: "二组",
          name: "王五",
          id: 2
        },
        {
          grade: "一年级",
          class: "三班",
          group: "三组",
          name: "李四",
          id: 3
        },
        {
          grade: "二年级",
          class: "一班",
          group: "三组",
          name: "小明",
          id: 4
        },
        {
          grade: "二年级",
          class: "一班",
          group: "三组",
          name: "花花",
          id: 5
        },
        {
          grade: "二年级",
          class: "二班",
          group: "二组",
          name: "田七",
          id: 6
        },
        {
          grade: "二年级",
          class: "二班",
          group: "二组",
          name: "小明",
          id: 7
        },
        {
          grade: "二年级",
          class: "二班",
          group: "三组",
          name: "花花",
          id: 8
        }
      ],
      selectedTableData: [], //当前筛选表数据
      selectedTableHeaders: [] //当前筛选列名
    };
  },
  methods: {
    handleUpdate (columns) {
      console.log("已选择列:", columns);
    },
    handleValueChange(value){
      console.log(value,222)
    }
  }
};
</script>
<style>
.tableArea > div {
  width: 500px;
}
</style>
